<template>
  <div class="popover-menu">
    <van-popover
      v-model:show="showPopover"
      :actions="actions"
      @select="handleSelect"
      placement="bottom-end"
    >
      <template #reference>
        <van-icon
          style="color: #000; padding-right: 10px"
          size="20px"
          name="add-o"
        />
      </template>
    </van-popover>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 接收父组件传入的actions和showPopover
const props = defineProps({
  actions: {
    type: Array,
    default: () => [{ text: '添加好友' }]
  },
  showPopover: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:showPopover', 'action-selected'])

const showPopover = ref(props.showPopover) // 控制Popover显示的状态
const actions = ref(props.actions) // 自定义actions

// 选择某个action时触发的事件
const handleSelect = (action) => {
  emit('update:showPopover', false) // 更新父组件中的 showPopover 状态
  emit('action-selected', action) // 通知父组件选中的action
}
</script>

<style scoped>
.popover-menu {
  display: flex;
  align-items: center;
}
</style>
